<template>
  <div>
    <el-card>
         <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="min-height: 80vh">
          这边是疫情表格数据 不开发了 功能暂未开放。。。。
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="min-height: 80vh">
          <div id="map" style="width: 100%; height: 70vh"></div>
        </el-card>
      </el-col>
    </el-row>
    </el-card>
  </div>
</template>

<script>
import 'echarts/map/js/china'
import jsonp from 'jsonp'
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {
    async initMap () {
      this.map = this.$echarts.init(document.getElementById('map'))
      const options = {
        title: {
          text: '疫情地图'
        },
        series: [
          {
            name: '确诊人数',
            type: 'map', // 告诉echarts要去渲染一个地图
            map: 'china',
            label: {
              show: true, // 控制对应地区的汉字
              color: '#333',
              fontSize: 10
            },
            roam: true, // 控制地图放大缩小
            zoom: 1.2, // 控制地图的放大缩小
            data: [], // 用来展示后台给的数据  {name:xx,value:xxx}
            /*      控制地图板块的颜色和边框 */
            itemStyle: {
              areaColor: '#83b5e7',
              borderColor: 'yellow' // 边框颜色
            },
            /*     控制鼠标滑过之后的背景色和字体颜色 */
            emphasis: {
              label: {
                color: '#fff',
                fontsize: 12
              },
              itemStyle: {
                areaColor: '#83b5e7'
              }
            }
          }
        ],
        visualMap: [
          {
            type: 'piecewise',
            show: true,
            pieces: [
              // 分段
              { min: 10000 },
              { min: 1000, max: 9990 },
              { min: 100, max: 999 },
              { min: 10, max: 99 },
              { min: 1, max: 9 }
            ],
            inRange: {
              symbol: 'rect',
              color: ['#ffc0b1', '#e70520']
            },
            itemWidth: 20,
            itemHeight: 10
          }
        ],
        tooltip: {
          trigger: 'item' // 鼠标移入后显示人数
        }
      }
      this.getMapData()
      this.map.setOption(options)
    },
    getMapData () {
      jsonp(
        'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', // 接口
        {},
        (err, data) => {
          if (!err) {
            // 代表请求数据成功
            const list = data.data.list.map((item) => ({
              name: item.name,
              value: item.value
            })) // 从接口获取到数据后，使用map()函数，进行接口数据映射
            const option = {
              series: {
                data: list
              }
            }
            this.map.setOption(option)
          }
        }
      )
    }
  },
  mounted () {
    this.initMap()
  }
}
</script>

<style>
</style>
